<html>
<title>Insert title here</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //需求2：使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.   
            function showContent(li){
                alert($(li).text());
            }
            $("li").click(function(){
                showContent(this)
            });
            
            //需求1：点击 submit 按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型"; 
            $(":submit").click(function(){
                var $type = $(":radio[name='type']:checked");
                console.log(typeof $type)
                console.log(document)
                console.log($(document)[0])
                console.log($.fn.jquery);
                if($type.length == 0 ){
                    var stuff = "";
                    $(":radio").each(function(){
                        stuff += this.value;
                    });
                    alert("请选择类型:" + stuff);
                    return false;
                } 

                var typeVal = $type.val();
                //检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";
                var $text = $(":text[name='name']");
                var textVal = $.trim($text.val());
                console.log($text)
                console.log($text.val())
                console.log(textVal.length)
                $text.val(textVal);
                if(textVal == ""){
                    alert("请输入内容");
                    return false;
                }
                //alert("^^" +　textVal + "__");
                //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
                $("<li>" + textVal + "</li>").appendTo($("#" + typeVal))
                                             .click(function(){
                                                 showContent(this)
                                             });
                //$text.val("");
                return false;
            });
        })
    </script>
</head>
<body>

    <p>你喜欢哪个城市?</p>
    
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        
        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>        
        <br><br>        
        <form action="dom-7.html" name="myform">
            
            <input type="radio" checked name="type" value="city">城市</input>
            <input type="radio" name="type" value="game">游戏</input>
        
            name: <input type="text" name="name"/>
        
            <input type="submit" value="Submit" id="submit"/>
            
        </form>
</body>
</html>